<template>
    <div class="app-container">
        <div class="app-box">
            <!-- 左边 -->
            <div class="app-left">
                <div class="patient-message">
                    <div>报告id:{{report.reportID}}</div>
                    <div>学生用户名:{{report.studentUserName}}</div>
                    <div>报告创建时间:{{report.createDate}}</div>
                    <div>检查项目名:{{report.ptdtCheckName}}</div>
                    <div>检查项目类型：{{report.ptdtCheckMachine}}</div>
                    <div>状态:{{status[report.status]}}</div>
                    <div>分数:{{report.score}}</div>
                </div>

                <div class="demo_warp">
                    <ul class="tab_tit">
                        <li :class="tabIndex == 1?'active':''" @click="tabIndex = 1">检查准备</li>
                        <li :class="tabIndex == 2?'active':''" @click="tabIndex = 2">检查技术</li>
                        <li :class="tabIndex == 3?'active':''" @click="tabIndex = 3">检查所见</li>
                        <li :class="tabIndex == 4?'active':''" @click="tabIndex = 4">检查意见</li>
                        <div @click="tijiao" class="pingfen">提交报告和评分</div>
                    </ul>
                    <div class="tab_con">
                        <div class="tav_content" v-show="tabIndex==1">
                            <div class="xinxi">
                                <div class="bingren">病人信息</div>
                                <div class="bingrenXinxi" style="line-height: 30px;overflow-y: auto;">
                                    <div class="bingshi" style="display:flex; margin-top:10px; ">
                                        <div style="width:100px;text-align: right;">病史：</div>
                                        <div style="flex:1">{{report.ptdtBgReadyTxt}}</div>
                                    </div>
                                    <div class="jsSJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查所见：</div>
                                        <div style="flex:1">{{report.ptdtCheckSjTxt}}</div>
                                    </div>
                                    <div class="jcYJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查意见：</div>
                                        <div style="flex:1">{{report.ptdtCheckYjTxt}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren">学生报告</div>
                                <div class="bingrenXinxi">
                                    <el-input type="textarea" style="width:100%;height:100%"
                                        v-model="report.jcProReadyTxt"></el-input>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren ">教师评价</div>
                                <div class="bingrenXinxi1">
                                    <el-input type="textarea" style="width:100%;height:100%"
                                        v-model="report.checkProReady"></el-input>
                                </div>
                            </div>
                        </div>
                        <div class="tav_content" v-show="tabIndex==2">
                            <div class="xinxi">
                                <div class="bingren">病人信息</div>
                                <div class="bingrenXinxi" style="line-height: 30px;overflow-y: auto;">
                                    <div class="bingshi" style="display:flex; margin-top:10px; ">
                                        <div style="width:100px;text-align: right;">病史：</div>
                                        <div style="flex:1">{{report.ptdtBgReadyTxt}}</div>
                                    </div>
                                    <div class="jsSJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查所见：</div>
                                        <div style="flex:1">{{report.ptdtCheckSjTxt}}</div>
                                    </div>
                                    <div class="jcYJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查意见：</div>
                                        <div style="flex:1">{{report.ptdtCheckYjTxt}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren">学生报告</div>
                                <div class="bingrenXinxi">
                                    <el-input type="textarea" style="width:100%;height:100%"
                                        v-model="report.jcReadyTxt"></el-input>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren ">教师评价</div>
                                <div class="bingrenXinxi1">
                                    <el-input type="textarea" style="width:100%;height:100%"
                                        v-model="report.checkReady"></el-input>
                                </div>
                            </div>

                        </div>
                        <div class="tav_content" v-show="tabIndex==3">
                            <div class="xinxi">
                                <div class="bingren">病人信息</div>
                                <div class="bingrenXinxi" style="line-height: 30px;overflow-y: auto;">
                                    <div class="bingshi" style="display:flex; margin-top:10px; ">
                                        <div style="width:100px;text-align: right;">病史：</div>
                                        <div style="flex:1">{{report.ptdtBgReadyTxt}}</div>
                                    </div>
                                    <div class="jsSJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查所见：</div>
                                        <div style="flex:1">{{report.ptdtCheckSjTxt}}</div>
                                    </div>
                                    <div class="jcYJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查意见：</div>
                                        <div style="flex:1">{{report.ptdtCheckYjTxt}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren">学生报告</div>
                                <div class="bingrenXinxi">
                                    <el-input type="textarea" style="width:100%;height:100%" v-model="report.jcSjTxt">
                                    </el-input>
                                </div>
                            </div>
                            <div class="tab">
                                <div class="xinxi">
                                    <div class="bingren ">教师评价</div>
                                    <div class="bingrenXinxi1">
                                        <el-input type="textarea" style="width:100%;height:100%"
                                            v-model="report.checkSee"></el-input>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tav_content" v-show="tabIndex==4">
                            <div class="xinxi">
                                <div class="bingren">病人信息</div>
                                <div class="bingrenXinxi" style="line-height: 30px;overflow-y: auto;">
                                    <div class="bingshi" style="display:flex; margin-top:10px; ">
                                        <div style="width:100px;text-align: right;">病史：</div>
                                        <div style="flex:1">{{report.ptdtBgReadyTxt}}</div>
                                    </div>
                                    <div class="jsSJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查所见：</div>
                                        <div style="flex:1">{{report.ptdtCheckSjTxt}}</div>
                                    </div>
                                    <div class="jcYJ" style="display:flex; margin-top:10px">
                                        <div style="width:100px;text-align: right;">检查意见：</div>
                                        <div style="flex:1">{{report.ptdtCheckYjTxt}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren">学生报告</div>
                                <div class="bingrenXinxi">
                                    <el-input type="textarea" style="width:100%;height:100%" v-model="report.jcYjTxt">
                                    </el-input>
                                </div>
                            </div>
                            <div class="xinxi">
                                <div class="bingren ">教师评价</div>
                                <div class="bingrenXinxi1">
                                    <el-input type="textarea" style="width:100%;height:100%"
                                        v-model="report.checkOpinion"></el-input>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="app-right">
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleNodeClick">
                        <el-tab-pane label="历史" name="first">
                          <div class="box" style="height:280px; box-sizing: border-box;">
                              <el-card>
                                <el-descriptions title="病史"></el-descriptions>
                                <div  style="overflow:hidden; overflow-y: auto;height:210px">
                                   <div style="height:100%" class="contents" v-for="(item,index) in HistoryVo" :key="index">
                                    <div  style="height:100%" class="text-item">
                                        <span>
                                            {{item.ptdtCheckDate}}
                                        </span>
                                        <p></p>
                                        <span>
                                            {{item.ptdtBgReadyTxt}}
                                        </span>
                                    </div>
                                </div>
                                </div>
                               
                            </el-card>
                          </div>
                          
                           <div class="box" style="height:280px; box-sizing: border-box;">
                              <el-card>
                                <el-descriptions title="检查所见"></el-descriptions>
                                <div  style="overflow:hidden; overflow-y: auto;height:210px">
                                   <div style="height:100%" class="contents" v-for="(item,index) in HistoryVo" :key="index">
                                    <div  style="height:100%" class="text-item">
                                        <span>
                                            {{item.ptdtCheckDate}}
                                        </span>
                                        <p></p>
                                        <span>
                                            {{item.ptdtCheckSjTxt}}
                                        </span>
                                    </div>
                                </div>
                                </div>
                               
                            </el-card>
                          </div>


                          <div class="box" style="height:280px; box-sizing: border-box;">
                              <el-card>
                                <el-descriptions title="检查意见"></el-descriptions>
                                <div  style="overflow:hidden; overflow-y: auto;height:210px">
                                   <div style="height:100%" class="contents" v-for="(item,index) in HistoryVo" :key="index">
                                    <div  style="height:100%" class="text-item">
                                        <span>
                                            {{item.ptdtCheckDate}}
                                        </span>
                                        <p></p>
                                        <span>
                                            {{item.ptdtCheckyjTxt}}
                                        </span>
                                    </div>
                                </div>
                                </div>
                               
                            </el-card>
                          </div>
                            <!-- <el-card>
                                <el-descriptions title="检查所见"></el-descriptions>
                                <div class="text-item" style="overflow:hidden; overflow-y: auto;" v-for="(item,index) in HistoryVo" :key="index">
                                    <span>
                                        {{item.ptdtCheckDate}}
                                    </span>
                                    <p></p>
                                    <span>
                                        {{item.ptdtCheckSjTxt}}
                                    </span>
                                </div>
                            </el-card>
                            <el-card>
                                <el-descriptions title="检查意见"></el-descriptions>
                                <div class="text-item" v-for="(item,index) in HistoryVo" :key="index">
                                    <span>
                                        {{item.ptdtCheckDate}}
                                    </span>
                                    <p></p>
                                    <span>
                                        {{item.ptdtCheckyjTxt}}
                                    </span>
                                </div>
                            </el-card> -->
                        </el-tab-pane>
                        <el-tab-pane label="截图" name="second">
                            <div class="contents"></div>
                        </el-tab-pane>
                        <el-tab-pane label="模板" name="third">
                            <div class="contents">
                                <el-tree :data="data" :props="defaultProps" @node-click="getTemplateInfo">
                                </el-tree>
                            </div>
                            <!-- <el-card class="box-card" lable="检查所见" :size="600">
                                {{TemplateInfo.libCheckSj}}
                            </el-card>
                            <el-card class="box-card" lable="检查意见">
                                {{TemplateInfo.libCheckYj}}
                            </el-card> -->
                        </el-tab-pane>
                        <el-tab-pane label="序列" name="fourth">
                            <div class="contents">序列</div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import teacher from '@/api/report/teacher'
    export default {
        data() {
            return {
                textarea1: "dnjoiksadnsnnnnnnnnnnnnnnnnnnnnnnnnnnklasdnklasndkaslndkdnkslandksladnkslandklasdnksal",
                reportId: this.$route.query.id,
                report: {},
                status: ["未完成", "已完成", "已批改"],
                updateStatus: '2',
                //
                cdoe: '',
                //病史
                HistoryVo: [],
                activeName: 'first',
                defaultProps: {
                    label: 'label',
                    children: 'children'
                },
                data: [],
                TemplateInfo: {},
                tabIndex: 1,  //tab切换索引
            }
        },
        created() {
            this.getReport(this.$route.query.id)
            
        },
        methods: {
            //获取报告详情
            getReport(reportId) {
                teacher.getReport(reportId).then(response => {
                    this.report = response.data
                    this.getBgReady()    
                })
                
            },
            //新增/修改评价
            insertComment() {
                if (this.report.status == "1") {
                    if (this.report.checkSee == null) {
                        this.report.checkSee = ''
                    }
                    if (this.report.checkProReady == null) {
                        this.report.checkProReady = ''
                    }
                    if (this.report.checkReady == null) {
                        this.report.checkReady = ''
                    }
                    if (this.report.checkOpinion == null) {
                        this.report.checkOpinion = ''
                    }
                    teacher.insertComment(this.report, this.updateStatus).then(response => {
                        this.cdoe = response.code
                        if (this.cdoe == 200) {
                            this.$router.push({ path: `/teacher/studentReport` })
                            this.code = ''
                        }
                    })

                }
                if (this.report.status == "2") {
                    teacher.updateComment(this.report).then(response => {
                        this.cdoe = response.code
                        if (this.cdoe == 200) {
                            this.$router.push({ path: `/teacher/studentReport` })
                            this.code = ''
                        }
                    })
                }
                if (this.report.status == "0") {
                    this.$message('请勿批改学生未完成的报告');
                    this.$router.push({ path: `/teacher/studentReport` })
                }
            },

            //点击节点触发
            getTemplateInfo(e) {
                if (e.children == null) {
                    teacher.getTemplateInfo(e.id, e.pid).then(
                        response => {
                            this.TemplateInfo = response.data || {}
                            this.report.checkSee = this.TemplateInfo.libCheckSj
                            this.report.checkOpinion = this.TemplateInfo.libCheckYj
                        }
                    )
                }

            },
            //标签页切换触发
            handleNodeClick(e) {
                switch (this.activeName) {
                    case 'first':
                        this.getBgReady()
                        break
                    case 'second':
                        console.log('second')
                        break
                    case 'third':
                        teacher.getTemplate().then(response => {
                            this.data = response.data.public
                        })
                        break
                    case 'four':
                        console.log('fourth')
                        break
                }

            },

            //历史
            getBgReady() {
                teacher.getHistory(this.report.patientId).then(
                    response => {
                        this.HistoryVo = response.data || {}
                    }
                )
            },

            //提交
            tijiao() {
                this.$prompt('请输入评分！确定之后会提交评分和评价', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^(0|[1-9]\d?|100)$/,
                    inputErrorMessage: '请输入0-100的分数'
                }).then((val) => {
                    this.report.score = val.value;
                    this.insertComment();
                    this.$message({
                        type: 'success',
                        message: '你提交了评价和分数！'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消评价和评分'
                    });
                });
            }
        }

    }

</script>

<style lang="scss" scoped>
    $border : 1px solid #ECECEC;

    .active {
        color: #409eff;

    }


    .patient-message {
        border: $border;
        background-color: #ffffff;

        >div {
            display: inline-block;
            padding: 15px;
        }
    }

    .app-container::before {
        content: '';
        position: fixed;
        z-index: -1;
        background-size: 100% auto;
        background-color: #f6f7fb;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0px;
        margin: 0px;
    }

    .app-box {
        width: 1440px;
        height: 915px;
        display: flex;
        overflow: hidden;
    }

    .app-left {
        width: 940px;
        height: 100%;
    }

    .app-right {
        background-color: #ffffff;
        width: 500px;
        padding: 10px;
    }


    // tabs切换卡
    .tab_tit {
        list-style: none;
        display: flex;
        background-color: white;
        margin: 0;
        border: $border;
        position: relative;

        li {
            margin-right: 30px;
            line-height: 60px;
            cursor: pointer;
        }

        .pingfen {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #409eff;
            height: 38px;
            line-height: 38px;
            width: 150px;
            text-align: center;
            color: white;
            border-radius: 5px;
            cursor: pointer;

        }
    }

    .tab_con {
        padding: 16px;
        background-color: white;
        border: $border;
        box-sizing: border-box;

        .tav_content {
            height: 720px;
            width: 100%;
            border: $border;

            .content {
                height: 240px;
                width: 100%;
            }
        }

        .xinxi {
            height: 240px;
            display: flex;

            .bingren {
                width: 130px;
                box-sizing: border-box;
                text-align: center;
                line-height: 240px;
                border: $border;
                background-color: #fafafc;
            }

            .bingrenXinxi {
                flex: 1;
                border: $border;

                ::v-deep textarea {
                    width: 100%;
                    height: 100%;
                    border: none;
                    background-color: white;
                    line-height: 30px;
                    resize: none;
                    color: black;
                    cursor: default;
                }

            }

            .bingrenXinxi1 {
                flex: 1;
                border: $border;

                ::v-deep textarea {
                    width: 100%;
                    height: 100%;
                    background-color: white;
                    line-height: 30px;
                    resize: none;
                    color: black;
                }
            }
        }

    }

    div::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    div::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    div::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
    }

    .el-card-define {
        min-height: 100%;
        height: 100%;
    }

    .el-card-define>>>.el-card__body {
        height: 100%;
    }
     ::v-deep .el-card__body{
        overflow-x:hidden !important;
        overflow-y:hidden !important;
        overflow: hidden !important;
    }
   

    .box ::v-deep .el-card,::v-deep .is-always-shadow,::v-deep .el-card__body{
      height: 100%;
    }
</style>